<template>
  <div>
    <div>
      <span>全选</span>
      <input type="checkbox" v-model="isAll" name="" id="" />
      <button @click.prevent="fanfn">反选</button>
    </div>
    <ul>
      <li v-for="(obj, index) in list" :key="index">
        <input type="checkbox" v-model="obj.checked" />
        {{ obj.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "八戒", checked: false },
        { name: "www", checked: false },
        { name: "banji", checked: false },
        { name: "hah", checked: false },
      ],
    };
  },
  methods: {
    fanfn() {
      // 反选功能
      this.list.forEach((item) => (item.checked = !item.checked));
    },
  },
  computed: {
    isAll: {
      set(val) {
        // console.log(val);
        // 多选控制小选
        return this.list.forEach((item) => (item.checked = val));
      },
      get() {
        // 小选控制多选
        return this.list.every((item) => item.checked);
      },
    },
  },
};
</script>

<style>
</style>